<template>
    <div class="login_box">
        <div class="left">
            <div class="title" v-html="text"></div>
        </div>
        <div class="right">
            <input type="text" class="inputs phone" placeholder="请输入您的手机号" v-model="userInfo.phoneNumber" />
            <input type="password" class="inputs pwd" placeholder="请输入您的密码" v-model="userInfo.passWord" />
            <input type="text" class="inputs nick" placeholder="请输入您的昵称" v-model="userInfo.userName" />
            <div class="tips">
                <div>已经有账号?<span @click="goLogin">去登录</span></div>
            </div>
            <button @click="register">注册</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue"
import { useRouter } from "vue-router";
import axios from 'axios'
import { h } from 'vue'
import { ElNotification } from 'element-plus'
const router = useRouter()
export interface UserInfoData {
    phoneNumber: string,
    passWord: string,
    userName?: string,
}

let userInfo = ref<UserInfoData>({
    phoneNumber: "",
    passWord: "",
    userName: "",
});
onMounted(() => {
    print('WELCOME TO\nILOVEFCHAT')
})

let text = ref<string>('')
// 打印机效果
const print = async (printInfo: string) => {
    let printText = printInfo
    for (let i = 0; i < printText.length; i++) {
        let str = printText.slice(i, i + 1)
        if (str === '\n') {
            text.value = text.value + '<br>'
        } else {
            await new Promise((resolve) => {
                setTimeout(() => {
                    text.value = text.value + str
                    resolve(null)
                }, 80)
            })
        }
    }
    text.value = text.value
}

const register = async () => {
    axios.post("/api/register", {
        phoneNumber: userInfo.value.phoneNumber,
        passWord: userInfo.value.passWord,
        userName:userInfo.value.userName
    })
        .then((response) => {
            // 处理登录成功的逻辑
            console.log(response.data);
            if (response.data.code == 0) {
                ElNotification({
                    title: '注册失败',
                    message: h('i', { style: 'color: teal' }, response.data.msg),
                })
            }
            if (response.data.code == 1) {
                ElNotification({
                    title: '注册成功',
                })
                router.replace({
                    name:'login'
                })
            }

        })
        .catch((error) => {
            // 处理登录失败的逻辑
            console.error(error);
            ElNotification({
                title: '注册失败',
                message: h('i', { style: 'color: teal' }, '网络错误'),
            })

        });
}
const goLogin = async () => {
    router.replace({
        name: "login"
    })
}


</script>

<style scoped lang="scss">
.login_box {
    width: 1000px;
    height: 600px;
    display: flex;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;

    .left {
        width: 100%;
        height: 100%;
        flex: 16;
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 20% 0;
        box-sizing: border-box;

        &::before {
            content: '';
            position: absolute;
            top: 40%;
            left: 30%;
            width: 280px;
            height: 100px;
            background: linear-gradient(to right, #4460f1, #c471ed, #f64f59);
            filter: blur(70px);
            transition: all .5s;
        }

        &:has(.desc:hover) {
            &::before {
                filter: blur(55px);
            }
        }

        .title {
            width: 100%;
            height: 120px;
            line-height: 60px;
            font-size: 40px;
            font-weight: bold;
            font-family: Regular;
            padding-left: 25%;
            box-sizing: border-box;
            color: #333;
            z-index: 2;
        }

        .desc {
            font-size: 15px;
            font-weight: bold;
            padding-left: 45%;
            margin-top: 10px;
            color: #505050;
            cursor: pointer;
            z-index: 2;

            span {
                color: #5140f0;
                text-decoration: underline;
            }
        }
    }

    .right {
        flex: 18;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .inputs {
            display: block;
            width: 290px;
            height: 55px;
            border-radius: 10px;
            border: 0;
            background-color: #f9f9f9;
            color: rgb(80, 82, 84);
            outline: none;
            padding: 20px;
            box-sizing: border-box;
            font-size: 15px;

            &::-webkit-input-placeholder {
                font-size: 13.5px;
            }
        }

        .phone,
        .pwd {
            margin-bottom: 25px;
        }

        .tips {
            width: 290px;
            text-align: right;
            margin-top: 10px;
            color: #aaacb0;
            font-size: 13px;

            span {
                color: rgb(68, 96, 241);
                cursor: pointer;
            }
        }

        button {
            width: 290px;
            height: 50px;
            background-color: #4460f1;
            border-radius: 10px;
            font-size: 15px;
            color: #fff;
            border: 0;
            font-weight: 600;
            margin: 30px 0;
            cursor: pointer;
            box-shadow: #4460f1 0 20px 30px -10px;
            transition: box-shadow .3s;

            &:hover {
                box-shadow: #4460f1 0 10px 30px -10px;
            }
        }
    }
}
</style>